import React from "react";
import { Tabs, Space, Input, DatePicker, Select } from "antd";
import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import "@/views/commodity/style/style.less";
import { apiGetOrderList } from '@/request/orderManagement'
import { getDateTime3 } from '@/utils/getDate'
import { exportSheetTable } from '@/utils/exportTable.js'
import moment from "moment";

const { RangePicker } = DatePicker;
const { Search } = Input;
const { TabPane } = Tabs;

class OrderList extends React.Component {
  state = {
    orderState: '3',
    columns2: [
      {
        title: "订单编号",
        dataIndex: "orderCode",
        key: "orderCode",
      },
      {
        title: "用户昵称",
        dataIndex: "orderMemberName",
        key: "orderMemberName",
      },
      {
        title: "所属门店",
        dataIndex: "orderTypeName",
        key: "orderTypeName",
      },
      {
        title: "订单金额（元）",
        dataIndex: "orderTotalPrice",
        key: "orderTotalPrice",
        render: (text, render) => {
          return <React.$Price price={render.orderTotalPrice} />
        }
      },
      {
        title: "实付金额（元）",
        dataIndex: "orderPayPrice",
        key: "orderPayPrice",
        render: (text, render) => {
          return <React.$Price price={render.orderPayPrice} />
        }
      },
      {
        title: "付款方式",
        dataIndex: "payWay",
        key: "payWay",
        render: (text, render) => {
          let label = ''
          switch (render.payWay) {
            case 'WeChat':
              label = '微信'
              break;
            case 'Alipay':
              label = '支付宝'
              break;
            case 'UnionPay':
              label = "银联"
              break;
            case 'YsPay':
              label = "银行卡"
              break;
            default:
              label = "未知支付方式"
          }
          return label;
        }
      },
      {
        title: "收货方式",
        dataIndex: "pickupWay",
        key: "pickupWay",
        render: (text, render) => {
          let label = ""
          switch (render.pickupWay) {
            case 'D':
              label = "到店自取"
              break;
            case 'T':
              label = '同城配送'
              break
            default:
              label = "未知配送方式"
          }
          return label;
        }
      },
      {
        title: "订单时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "订单状态",
        render: () => {
          return '未使用'
        }
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, render) => {
          return (
            <div>
              <TheButton
                haspermi={['order:list:details']}
                onClick={() => this.props.history.push(`/order/details/${render.orderId}`)}
              >
                查看订单
              </TheButton>
            </div>
          );
        },
      },
    ],
    columns3: [
      {
        title: "订单编号",
        dataIndex: "orderCode",
        key: "orderCode",
      },
      {
        title: "用户昵称",
        dataIndex: "orderMemberName",
        key: "orderMemberName",
      },
      {
        title: "所属门店",
        dataIndex: "orderTypeName",
        key: "orderTypeName",
      },
      {
        title: "订单金额（元）",
        dataIndex: "orderTotalPrice",
        key: "orderTotalPrice",
        render: (text, render) => {
          return <React.$Price price={render.orderTotalPrice} />
        }
      },
      {
        title: "实付金额（元）",
        dataIndex: "orderPayPrice",
        key: "orderPayPrice",
        render: (text, render) => {
          return <React.$Price price={render.orderPayPrice} />
        }
      },
      {
        title: "付款方式",
        dataIndex: "payWay",
        key: "payWay",
        render: (text, render) => {
          let label = ''
          switch (render.payWay) {
            case 'WeChat':
              label = '微信'
              break;
            case 'Alipay':
              label = '支付宝'
              break;
            case 'UnionPay':
              label = "银联"
              break;
            case 'YsPay':
              label = "银行卡"
              break;
            default:
              label = "未知支付方式"
          }
          return label;
        }
      },
      {
        title: "收货方式",
        dataIndex: "pickupWay",
        key: "pickupWay",
        render: (text, render) => {
          let label = ""
          switch (render.pickupWay) {
            case 'D':
              label = "到店自取"
              break;
            case 'T':
              label = '同城配送'
              break
            default:
              label = "未知配送方式"
          }
          return label;
        }
      },
      {
        title: "订单时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "订单状态",
        render: () => {
          return '待接单'
        }
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, render) => {
          return (
            <div>
              <TheButton haspermi={['order:list:details']}
                onClick={() => this.props.history.push(`/order/details/${render.orderId}`)}
              >
                查看订单
              </TheButton>
            </div>
          );
        },
      },
    ],
    columns9: [
      {
        title: "订单编号",
        dataIndex: "orderCode",
        key: "orderCode",
      },
      {
        title: "用户昵称",
        dataIndex: "orderMemberName",
        key: "orderMemberName",
      },
      {
        title: "所属门店",
        dataIndex: "orderTypeName",
        key: "orderTypeName",
      },
      {
        title: "订单金额（元）",
        dataIndex: "orderTotalPrice",
        key: "orderTotalPrice",
        render: (text, render) => {
          return <React.$Price price={render.orderTotalPrice} />
        }
      },
      {
        title: "实付金额（元）",
        dataIndex: "orderPayPrice",
        key: "orderPayPrice",
        render: (text, render) => {
          return <React.$Price price={render.orderPayPrice} />
        }
      },
      {
        title: "付款方式",
        dataIndex: "payWay",
        key: "payWay",
        render: (text, render) => {
          let label = ''
          switch (render.payWay) {
            case 'WeChat':
              label = '微信'
              break;
            case 'Alipay':
              label = '支付宝'
              break;
            case 'UnionPay':
              label = "银联"
              break;
            case 'YsPay':
              label = "银行卡"
              break;
            default:
              label = "未知支付方式"
          }
          return label;
        }
      },
      {
        title: "收货方式",
        dataIndex: "pickupWay",
        key: "pickupWay",
        render: (text, render) => {
          let label = ""
          switch (render.pickupWay) {
            case 'D':
              label = "到店自取"
              break;
            case 'T':
              label = '同城配送'
              break
            default:
              label = "未知配送方式"
          }
          return label;
        }
      },
      {
        title: "订单时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "订单状态",
        render: () => {
          return '已使用'
        }
      },
      {
        title: "使用时间",
        dataIndex: "finishTime",
        key: "finishTime",
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, render) => {
          return (
            <div>
              <TheButton haspermi={['order:list:details']}
                onClick={() => this.props.history.push(`/order/details/${render.orderId}`)}
              >查看订单</TheButton>
            </div>
          );
        },
      },
    ],
    dataSource2: [],
    dataSource3: [],
    dataSource9: [],
    pageData2: {
      pageNo: 1,
      pageSize: 10,
    },
    pageData3: {
      pageNo: 1,
      pageSize: 10,
    },
    pageData9: {
      pageNo: 1,
      pageSize: 10,
    },
    total2: 0,
    total3: 0,
    total9: 0,
    tabData: [
      {
        label: '待接单',
        value: '3'
      },
      {
        label: '未使用',
        value: '2'
      },
      {
        label: '已使用',
        value: '9'
      },
    ],
    searchValue: {
      orderMemberName: '',
      orderTypeName: '',
      orderCode: '',
      createTimeStart: '',
      createTimeEnd: ''
    },
    exportLoading: false,
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { orderState, searchValue } = this.state
    let res = await apiGetOrderList({
      orderState,
      ...searchValue,
      ...this.state[`pageData${orderState}`]
    })
    if (res.data && res.code === 0) {
      this.setState({
        [`pageData${orderState}`]: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        [`dataSource${orderState}`]: res.data,
        [`total${orderState}`]: res.totalCount
      })
    }
  }
  setTabKey = (orderState) => {
    this.setState({ orderState }, () => {
      this.getData()
    })
  };
  pageChange = (pageNo, pageSize, index) => {
    this.setState({
      [`pageData${index}`]: {
        pageNo,
        pageSize,
      },
    }, () => this.getData());
  };
  setNickName = e => {
    this.setState({
      searchValue: {
        ...this.state.searchValue,
        memberName: e
      },
      pageData2: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData3: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData9: {
        pageNo: 1,
        pageSize: 10,
      },
    }, () => {
      this.getData()
    })
  }
  setStoreName = e => {
    this.setState({
      searchValue: {
        ...this.state.searchValue,
        storeName: e
      },
      pageData2: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData3: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData9: {
        pageNo: 1,
        pageSize: 10,
      },
    }, () => {
      this.getData()
    })
  }
  setOrderCode = e => {
    this.setState({
      searchValue: {
        ...this.state.searchValue,
        orderCode: e
      },
      pageData2: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData3: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData9: {
        pageNo: 1,
        pageSize: 10,
      },
    }, () => {
      this.getData()
    })
  }
  datePickerChange = e => {
    if (e) {
      this.setState({
        searchValue: {
          ...this.state.searchValue,
          createTimeStart: getDateTime3(e[0]),
          createTimeEnd: getDateTime3(e[1])
        },
        pageData2: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData3: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData9: {
          pageNo: 1,
          pageSize: 10,
        },
      }, () => {
        this.getData()
      })
    } else {
      this.setState({
        searchValue: {
          ...this.state.searchValue,
          createTimeStart: '',
          createTimeEnd: ''
        },
        pageData2: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData3: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData9: {
          pageNo: 1,
          pageSize: 10,
        },
      }, () => {
        this.getData()
      })
    }
  }

  exportAll = async () => {
    const { searchValue, orderState } = this.state
    this.setState({ exportLoading: true })
    let res = await apiGetOrderList({ ...searchValue, orderState, pageNo: 1, pageSize: 100, type: "Y", })
    if (res.code === 0 && res.data) {
      console.log(res.data);
      const th_arr = [
        {
          title: '门店订单列表',
          prop: '',
          children: [
            {
              title: '订单编号',
              prop: 'orderCode'
            },
            {
              title: '用户昵称',
              prop: 'orderMemberName'
            },
            {
              title: '所属门店',
              prop: 'orderTypeName',
            },

            {
              title: '订单金额',
              prop: 'orderTotalPrice',
              valueType:'number'
            },
            {
              title: '实付金额',
              prop: 'orderPayPrice',
              valueType:'number'
            },
            {
              title: '付款方式',
              prop: 'payWay'
            },
            {
              title: '收货方式',
              prop: 'pickupWay'
            },
            {
              title: '订单时间',
              prop: 'createTime'
            },
            {
              title: '订单状态',
              prop: 'orderState'
            },
          ]
        },

      ]
      let tb_arr = []
      res.data.forEach(item => {
        tb_arr.push({
          orderCode: item.orderCode || '/',
          orderMemberName: item.orderMemberName || '/',
          orderTypeName: item.orderTypeName || '/',
          orderTotalPrice: Number(item.orderTotalPrice/100).toFixed(2) || '/',
          orderPayPrice: Number(item.orderPayPrice/100).toFixed(2) || '/',
          payWay: item.payWay==="Alipay"?"支付宝":item.payWay==="WeChat"?"微信":item.payWay==="UnionPay"?"银联":item.payWay==="YsPay"?"银行卡":'/',
          pickupWay: item.pickupWay==="D"?"到店自取": item.pickupWay==="T"?"同城配送": '/',
          createTime: item.createTime || '/',
          orderState: item.orderState==='3'?"待接单":item.orderState==='2'?"未使用":item.orderState==='9'?"已使用": '/',
        })
      })
      this.setState({ exportLoading: false })
      exportSheetTable({ fileName: `门店订单${orderState ==='3'?"待接单":orderState==='2'?"未使用":orderState==='9'?"已使用":""}`, tH_data: th_arr, tB_data: tb_arr, isSheet: true, merge: false, })
    }
  }

  render() {
    const operations = {
      right: (
        <Space>
          <Search
            onSearch={(e) => this.setNickName(e)}
            style={{ width: 150 }}
            placeholder={"用户昵称"}
            allowClear
            enterButton
          />
          <Search
            onSearch={(e) => this.setStoreName(e)}
            style={{ width: 150 }}
            placeholder={"门店名称"}
            allowClear
            enterButton
          />
          <Search
            onSearch={(e) => this.setOrderCode(e)}
            style={{ width: 180 }}
            placeholder={"请输入订单号"}
            allowClear
            enterButton
          />
          <div>
            <span>下单时间 </span>
            <RangePicker onChange={(e) => this.datePickerChange(e)} />
          </div>
          <div>
            <TheButton
              haspermi={['order:list:export']}
              type="default"
              size="middle"
              onClick={() => this.exportAll()}
              loading={this.exportLoading}
            >
              导出全部
            </TheButton>
          </div>
        </Space>
      ),
    };
    const { tabData } = this.state;
    return (
      <div className="p-layout-box">
        <Tabs
          onChange={(value) => this.setTabKey(value)}
          tabBarExtraContent={operations}
        >
          {tabData.map((v, i) => {
            return (
              <TabPane tab={v.label} key={v.value}>
                <div className="p-layout-content-pagination">
                  <TheTable
                    scroll={{ x: "max-content" }}
                    columns={this.state[`columns${v.value}`]}
                    dataSource={this.state[`dataSource${v.value}`]}
                  />
                  <ThePagination
                    pageNo={this.state[`pageData${v.value}`].pageNo}
                    pageSize={this.state[`pageData${v.value}`].pageSize}
                    total={this.state[`total${v.value}`]}
                    pageChange={(pageNo, pageSize) =>
                      this.pageChange(pageNo, pageSize, v.value)
                    }
                  />
                </div>
              </TabPane>
            );
          })}
        </Tabs>
      </div>
    );
  }
}

export default OrderList;
